<template>
  <div class="dealer">
    <ContentWrap>
      <FormContainer :column="4">
        <el-form
          ref="dealerForm"
          :model="formData"
          :rules="formRules"
          label-width="90px"
        >
          <el-form-item prop="officeCode" label="所属办事处">
            <SearchSelectPicker
              :url="`/call-center/api/v1/mscInfo/office/ref/page`"
              placeholder="请输入所属办事处"
              method="get"
              lable-name="name"
              value-name="code"
              :value.sync="formData.officeCode"
              :lable.sync="formData.officeName"
            ></SearchSelectPicker>
          </el-form-item>
          <el-form-item prop="name" label="经销商名称">
            <el-input v-model="formData.name" placeholder="请输入经销商" clearable />
          </el-form-item>
          <el-form-item prop="code" label="经销商编码">
            <el-input v-model="formData.code" clearable placeholder="请选择经销商编码" />
          </el-form-item>
          <el-form-item prop="status" label="经销商状态">
            <el-select v-model="formData.status" filterable clearable placeholder="请选择经销商状态">
              <el-option :value="1" label="启用" />
              <el-option :value="0" label="停用" />
            </el-select>
          </el-form-item>
          <el-form-item :span="12">
            <span style="font-size: 12px; color: red; position: absolute; top: -15px; left: -65px">
              (提示:所属办事处、经销商名称二选一为查询必要条件)
            </span>
          </el-form-item>
          <el-form-item :span="12" align="right">
            <Button @click="resetClick('dealerForm')">重置</Button>
            <Button type="primary" enter @click="searchClick('dealerForm')">查询</Button>
          </el-form-item>
        </el-form>
      </FormContainer>
      <table-box
        ref="dealerTable"
        :no-request="true"
        :table-config="dealerTableConfig"
        @select="selectChange"
      />
    </ContentWrap>
  </div>
</template>

<script>
import ContentWrap from '@/components/ContentWrap'
import FormContainer from '@/components/FormContainer'
import Button from '@/components/Button'
import { JsonToUrl } from '@/utils/params-format'
import SearchSelectPicker from '@/components/SearchSelectPicker'
const officeCode = { required: true, message: ' ', trigger: 'change' }
const name = { required: true, message: ' ', trigger: 'change' }
export default {
  name: 'InfoDataDealer',
  components: {
    ContentWrap,
    FormContainer,
    Button,
    SearchSelectPicker
  },
  data() {
    return {
      agencyOption: [],
      formData: {
        code: '', // 经销商编码
        name: '', // 经销商名称
        status: '', // 经销商状态
        officeCode: '', // 所属办事处
        officeName: ''
      },
      formRules: {
        officeCode: {},
        name: {}
      },
      url: `/call-center/api/v1/mscInfo/dealer/page`,
      dealerTableConfig: {
        interfacePath: '',
        pageFlag: true,
        hideFuncBar: true,
        // 表格字段信息配置
        setting: [
          {
            prop: 'code',
            label: '经销商编码',
            width: 120
          }, {
            prop: 'name',
            label: '经销商名称',
            width: 120
          }, {
            prop: 'status',
            label: '经销商状态',
            width: 120,
            formatData: (val) => {
              if (val.status === 1) return '启用'
              if (val.status === 0) return '停用'
              return '--'
            }
          }, {
            prop: 'organizationName',
            label: '所属办事处',
            width: 120
          }, {
            prop: 'contact',
            label: '联系人',
            width: 120,
            formatData: (val) => {
              if (val.contact) return val.contact
              return '--'
            }
          }, {
            prop: 'contactPhone',
            label: '联系电话',
            width: 120,
            formatData: (val) => {
              if (val.contactPhone) return val.contactPhone
              return '--'
            }
          }, {
            prop: 'accountManager',
            label: '成品客户经理',
            width: 120,
            formatData: (val) => {
              if (val.accountManager) return val.accountManager
              return '--'
            }
          }, {
            prop: 'accountManagerPhone',
            label: '联系方式',
            width: 120,
            formatData: (val) => {
              if (val.accountManagerPhone) return val.accountManagerPhone
              return '--'
            }
          }, {
            prop: 'customizeAccountManager',
            label: '定制客户经理',
            width: 120,
            formatData: (val) => {
              if (val.customizeAccountManager) return val.customizeAccountManager
              return '--'
            }
          }, {
            prop: 'customizeAccountManagerPhone',
            label: '联系方式',
            width: 120,
            formatData: (val) => {
              if (val.customizeAccountManagerPhone) return val.customizeAccountManagerPhone
              return '--'
            }
          }, {
            prop: 'cooperateStart',
            label: '合作起始日期',
            width: 120,
            formatData: (val) => {
              if (val.cooperateStart) return val.cooperateStart
              return '--'
            }
          }, {
            prop: 'cooperateEnd',
            label: '合作终止日期',
            width: 120,
            formatData: (val) => {
              if (val.cooperateEnd) return val.cooperateEnd
              return '--'
            }
          }
        ]
      }
    }
  },
  watch: {
    'formData.officeCode': {
      handler(v) {
        if (v) {
          Object.assign(this.formRules, { name: {}})
          setTimeout(() => { this.$refs['dealerForm'].validateField(['name']) }, 0)
        }
      }
    },
    'formData.name': {
      handler(v) {
        if (v) {
          Object.assign(this.formRules, { officeCode: {}})
          setTimeout(() => { this.$refs['dealerForm'].validateField(['officeCode']) }, 0)
        }
      }
    }
  },
  created() {},
  mounted() {
    this.dealerTableConfig.interfacePath = this.url
  },
  methods: {
    /**
     * 提交查询
     */
    searchClick(formName) {
      if (this.formData.officeCode === '' && this.formData.name === '') {
        this.$message({
          message: '所属办事处、经销商名称二选一为查询必要条件',
          type: 'error'
        })
        Object.assign(this.formRules, { officeCode, name })
        setTimeout(() => { this.$refs[formName].validateField(['officeCode', 'name']) }, 0)
      } else {
        Object.assign(this.formRules, { officeCode: {}, name: {}})
        setTimeout(() => { this.$refs[formName].validateField(['officeCode', 'name']) }, 0)
      }
      this.$refs[formName]
        .validate()
        .then((valid) => {
          if (valid) {
            const params = { ...this.formData }
            delete params.officeName
            const dealerParams = JsonToUrl(params)
            this.dealerTableConfig.interfacePath = `${this.url}${dealerParams}`
            this.$nextTick(() => {
              this.$refs.dealerTable.initTableData()
            })
          } else {
            console.log('error submit!!')
            return false
          }
        }).finally((e) => e)
    },
    /**
     * 重置表单
     */
    resetClick(formName) {
      Object.keys(this.formData).forEach(key => {
        this.$set(this.formData, key, '')
      })
      this.$refs[formName].resetFields()
    },
    selectChange(selection, row) {
      // console.log(selection, row)
    }
  }
}
</script>

<style lang="scss" scoped>
.dealer {}
</style>
